<template>
  <div class="course-video-container">

    <div class="btn-box">
      <!--<div class="evaluate text" @click="sendData(1)">
        评价
      </div>-->
      <div class="doc text" @click="getDoc">
        文档
      </div>

      <div class="discuss text" @click="goChartRoom">
        聊天室
      </div>

      <div class="note text" @click="getDoc">
        笔记
      </div>

    </div>

    <div class="box">
      <!--视频-->
      <div ref="video" class="video">

        <!--视频播放组件-->
        <d-player ref="player"
                  :options="options"
                  @abort="abort"
                  @canplay="canplay"
                  @canplaythrough="canplaythrough"
                  @durationchange="durationchange"
                  @emptied="emptied"
                  @ended="ended"
                  @error="error"
                  @loadeddata="loadeddata"
                  @loadedmetadata="loadedmetadata"
                  @loadstart="loadstart"
                  @mozaudioavailable="mozaudioavailable"
                  @pause="pause"
                  @play="play"
                  @playing="playing"
                  @progress="progress"
                  @ratechange="ratechange"
                  @seeked="seeked"
                  @seeking="seeking"
                  @stalled="stalled"
                  @suspend="suspend"
                  @timeupdate="timeupdate"
                  @volumechange="volumechange"
                  @waiting="waiting"

                  @screenshot="screenshot"
                  @thumbnails_show="thumbnails_show"
                  @thumbnails_hide="thumbnails_hide"
                  @danmaku_show="danmaku_show"
                  @danmaku_hide="danmaku_hide"
                  @danmaku_clear="danmaku_clear"
                  @danmaku_loaded="danmaku_loaded"
                  @danmaku_send="danmaku_send"
                  @danmaku_opacity="danmaku_opacity"
                  @contextmenu_show="contextmenu_show"
                  @contextmenu_hide="contextmenu_hide"
                  @notice_show="notice_show"
                  @notice_hide="notice_hide"
                  @quality_start="quality_start"
                  @quality_end="quality_end"
                  @destroy="destroy"
                  @resize="resize"
                  @fullscreen="fullscreen"
                  @fullscreen_cancel="fullscreen_cancel"
                  @subtitle_show="subtitle_show"
                  @subtitle_hide="subtitle_hide"
                  @subtitle_change="subtitle_change">

        </d-player>

        <div class="discuss">
          <CourseDiscuss :courseDetailId="courseDetailId"></CourseDiscuss>
        </div>
      </div>
    </div>

    <Drawer title="文档"
            draggable
            :mask-closable="true"
            :closable="true"
            :scrollable="true"
            :width="300"
            v-model="docFlag">

      <CourseDoc></CourseDoc>
    </Drawer>

    <Drawer title="聊天室"
            draggable
            :mask-closable="true"
            :closable="true"
            :scrollable="true"
            :width="400"
            v-model="discussFlag">

      <div slot="header">
        聊天室
        <div style="display:inline-block;color: #2d8cf0;cursor:pointer;" @click="goChartRoomFullScreen">
          全屏
        </div>
      </div>
      <CourseChartRoom v-if="discussFlag"></CourseChartRoom>
    </Drawer>

  </div>
</template>

<script>
import IconAli from "@/views/common/IconAli";
import CourseDoc from "@/components/course/CourseDoc";
import CourseDiscuss from "@/components/course/CourseDiscuss";
import CourseChartRoom from "@/components/course/CourseChartRoom";
import CourseCover from "@/assets/course/courseCover.png"

export default {
  //组件名称
  name: "CourseVideo",
  props: [],
  //组件注册
  components: {
    CourseDiscuss, CourseDoc, CourseChartRoom,
    IconAli
  },
  //数据驱动
  data() {
    return {
      courseDetailId: "",   // 课程id
      courseDetail: {},     //课程信息

      docFlag: false,       //文档抽屉开关

      docList: [],          //文档列表
      docErrorFlag: false,  //文档报错

      adFlag: false,        //广告开关
      discussFlag: false,   //聊天室开关

      player: Object,        //播放器
      //视频播放组件参数
      options: {
        live: false,        //是否开启直播
        autoplay: false,    //是否自动播放
        theme: '#66aaf1',   //主题色
        loop: false,        //是否循环播放
        lang: "zh-cn",      //语言 navigator.language.toLowerCase()，可选值: 'en', 'zh-cn', 'zh-tw'
        //screenshot: true,   //是否可以截图
        hotkey: true,       //开启热键,支持快进、快退、音量控制、播放暂停
        //airplay: true,      //在 Safari 中开启 AirPlay
        preload: 'auto',    //视频预加载，可选值: 'none', 'metadata', 'auto'
        volume: 0.7,        //默认音量，请注意播放器会记忆用户设置，用户手动设置音量后默认音量即失效
        // playbackSpeed: [0.9, 1.0, 1.1, 1.2, 1.3, 1.4, 1.5, 1.6, 1.7, 1.8, 1.9, 2.0, 2.2, 2.4, 2.6, 2.8, 3.0],   //可选的播放速率
        playbackSpeed: [0.9, 1, 1.1, 1.2, 1.3],   //可选的播放速率
        logo: "https://cn.vuejs.org/images/logo.svg", //在左上角展示一个 logo，你可以通过 CSS 调整它的大小和位置
        apiBackend: {       //自定义获取和发送弹幕行为
          read: function (endpoint, callback) {
            console.log("读取字幕,连接 WebSocket");

            callback();
          },
          send: function (endpoint, danmakuData, callback) {
            console.log("发送字幕,推送 WebSocket");
            console.log("endpoint");
            console.log(endpoint);
            console.log("danmakuData");
            console.log(danmakuData);
            callback();
          },
        },
        video: {            //视频信息
          //清晰度
          url: "",
          quality: [
            {
              name: 'HD 2K',
              url: '',
              type: 'normal',
            },
            {
              name: '蓝光 1080P',
              url: '',
              type: 'normal',
            },
            /*{
              name: '超清 720P',
              url: '',
              type: 'normal',
            },
            {
              name: '高清 480P',
              url: '',
              type: 'normal',
            },
            {
              name: '流畅 360P',
              url: '',
              type: 'normal',
            },*/
          ],
          defaultQuality: 0,  //默认清晰度
          //https://api.dogecloud.com/player/get.mp4?vcode=5ac682e6f8231991&userId=17&ext=.mp4
          // pic: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbdyingxiaocms.cdn.bcebos.com%2F2018-04-26%2Fbkdlhimenacjgf1524728311.JPG%3Fauthorization%3Dbce-auth-v1%2F8b215a07469945c48950fbab88c06962%2F2018-04-26T07%3A38%3A31Z%2F-1%2F%2F834462fa063e280f982cc562be0bfca84a21904&refer=http%3A%2F%2Fbdyingxiaocms.cdn.bcebos.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640395891&t=b486f597146a7e70916a7ee7587fe6d7",
          pic: CourseCover,
          //thumbnails: "https://i.loli.net/2019/06/06/5cf8c5d9cec8510758.jpg",  //视频缩略图
          type: "auto",        //可选值: 'auto', 'hls', 'flv', 'dash', 'webtorrent', 'normal' 或其他自定义类型
          customType: "",      //自定义类型
        },
        //外挂字幕
        /*subtitle: {
          url: "",           //必须,字幕链接
          type: "webvtt",      //字幕类型,可选值: 'webvtt', 'ass'，目前只支持 webvtt
          fontSize: "20px",    //字幕字号
          bottom: "40PX",      //字幕距离播放器底部的距离，取值形如: '10px' '10%'
          color: "#FFF",       //字幕颜色
        },*/
        //弹幕设置
        danmaku: {
          id: "001",     //弹幕池,必须唯一
          api: "",   //弹幕接口
          token: "",          //弹幕后端验证 token
          maximum: "",       //弹幕最大数量
          addition: [],      //额外外挂弹幕
          user: "",          //弹幕用户名
          bottom: "",        //弹幕距离播放器底部的距离，防止遮挡字幕，取值形如: '10px' '10%'
          unlimited: "",     //海量弹幕模式，即使重叠也展示全部弹幕，请注意播放器会记忆用户设置，用户手动设置后即失效
        },
        //自定义右键菜单
        contextmenu: [
          {text: '百度', link: 'https://www.baidu.com'},
          {text: '反馈 本功能正在开发中..', link: 'https://www.baidu.com'}
        ],
        //自定义进度条提示点
        highlight: [
          {time: 20, text: '这是第 20 秒'}
        ],
        mutex: true,       //互斥，阻止多个播放器同时播放，当前播放器播放时暂停其他播放器
      }
    }
  },
  //计算属性
  computed: {},
  //数据监听
  watch: {},
  //方法
  methods: {
    //点击文档
    getDoc() {
      this.docFlag = true
    },
    //点击聊天室
    goChartRoom() {
      this.discussFlag = true
    },
    //全屏聊天室
    goChartRoomFullScreen() {
      //跳转
      let {href} = this.$router.resolve({
        name: "CourseChartRoom",
        query: {
          cd_id: this.courseDetailId
        }
      });
      window.open(href, '_blank');
    },
    //########################################### 视频事件 ##########################################################
    abort() {

    },
    canplay() {

    },
    canplaythrough() {

    },
    durationchange() {

    },
    emptied() {

    },
    ended() {

    },
    error() {

    },
    loadeddata() {
      console.log("数据加载完成");
    },
    loadedmetadata() {
      console.log("加载元数据");
    },
    loadstart() {
      console.log("加载数据");
    },
    mozaudioavailable() {

    },
    //播放视频
    play() {
      console.log("播放视频");
    },
    //暂停视频
    pause() {
      console.log("暂停视频");
    },
    playing() {
      console.log("播放/快进/快退都会触发");
    },
    progress() {
      // console.log("视频快进 x5 秒");
    },
    ratechange() {
      console.log("调整播放速度");
    },
    seeked() {

    },
    seeking() {

    },
    stalled() {

    },
    suspend() {

    },
    timeupdate() {

    },
    volumechange() {

    },
    waiting() {

    },
    //################################################### 播放器事件 #####################################################
    screenshot() {

    },
    thumbnails_show() {

    },
    thumbnails_hide() {

    },
    danmaku_show() {

    },
    danmaku_hide() {

    },
    danmaku_clear() {

    },
    danmaku_loaded() {

    },
    danmaku_send() {

    },
    danmaku_opacity() {

    },
    contextmenu_show() {

    },
    contextmenu_hide() {

    },
    notice_show() {

    },
    notice_hide() {

    },
    quality_start() {

    },
    quality_end() {

    },
    destroy() {

    },
    resize() {

    },
    fullscreen() {

    },
    fullscreen_cancel() {

    },
    subtitle_show() {

    },
    subtitle_hide() {

    },
    subtitle_change() {

    },


    hideRightClick() {
      document.querySelector(".dplayer-mask").remove();
      document.querySelector(".dplayer-info-panel-item-url").remove(); //隐藏播放源
      let length = document.querySelectorAll(".dplayer-menu-item").length;
      document.querySelectorAll(".dplayer-menu-item")[length - 1].remove(); // 去掉作者信息
      document.querySelectorAll(".dplayer-menu-item")[length - 2].remove(); // 去掉作者信息
      document.querySelectorAll(".dplayer-menu-item")[length - 3].remove(); // 去掉作者信息
    },
    //根据id 查询信息
    selectCourseDetailByCourseDetailId() {
      this.axios.get(`/course/web/course-detail/${this.courseDetailId}`)
          .then((data) => {
            this.courseDetail = data.data
            this.options.video.url = data.data.videoUrl;
            // video的URL赋值并不能播放,使用 document 获取元素节点
            let e = document.getElementsByTagName("video")[0];
            e.src = data.data.videoUrl;
            //
            for (let i = 0; i < this.options.video.quality.length; i++) {
              this.options.video.quality[i].url = data.data.videoUrl;
            }
          })
    },
  },
  created() {
    let query = this.$route.query;
    this.courseDetailId = query.cd_id;
  },
  //钩子函数
  mounted() {
    this.selectCourseDetailByCourseDetailId();
    this.hideRightClick();
  }
}
</script>


<style lang="less" scoped>
.course-video-container {
  .video {
    width: 1200px;
    min-height: calc(100vh - 70px);
    margin: 0 auto;
  }

  /deep/ .dplayer-logo {
    margin-left: 90%;
    width: 50px;
    height: 50px;
    opacity: 1.0;
  }

  .discuss {
    margin-top: 30px;
  }

  .btn-box {
    position: absolute;
    z-index: 10;
    top: 80px;
    right: 10px;

    .doc,
    .discuss,
    .note {
      width: 80px;
      height: 40px;
      margin-bottom: 10px;
      cursor: pointer;
    }

    .doc {
      background-color: #15c05b;
    }

    .discuss {
      margin-top: 10px;
      //background-color: #d872a2;
      background-color: #e38636;
    }

    .note {
      margin-top: 10px;
      //background-color: #d872a2;
      background-color: #c561ef;
    }

    .text {
      line-height: 40px;
      font-size: 16px;
      color: #FFF;
      font-family: "Arial";
      border-radius: 4px;
      text-align: center;
    }
  }
}

/deep/ .ivu-drawer-body {
  background-color: #FFF;
}
</style>